<template>
  <div class="pageContent">
    <splitpanes
      :horizontal="this.$store.getters.device === 'mobile'"
      class="default-theme"
      @resize="paneResize"
      @ready="paneResize"
    >
      <!--部门数据-->
      <pane size="10">
        <div class="head-container">
          <el-input
            v-model="deptName"
            placeholder="请输入部门名称"
            clearable
            size="small"
            prefix-icon="el-icon-search"
            style="margin-bottom: 20px"
          />
        </div>
        <div class="head-container">
          <el-tree
            :data="deptOptions"
            :props="defaultProps"
            :expand-on-click-node="false"
            :filter-node-method="filterNode"
            ref="tree"
            node-key="id"
            default-expand-all
            highlight-current
            @node-click="handleNodeClick"
          />
        </div>
      </pane>
      <!--用户数据-->
      <pane size="90">
        <div class="header">
          <div class="left">一号机组</div>
          <div class="right">编号：<span>125438</span></div>
        </div>
        <div class="noticeNum">
          <div class="noticeItem">
            <div class="left">
              <div class="top"><span>70</span>℃</div>
              <div class="bottom">温度实时值</div>
            </div>
            <div class="right">
              <img src="@/assets/business/shuju1.png" alt="" />
            </div>
          </div>
          <div class="noticeItem">
            <div class="left">
              <div class="top"><span>50</span>A</div>
              <div class="bottom">电流实时值</div>
            </div>
            <div class="right">
              <img src="@/assets/business/shuju2.png" alt="" />
            </div>
          </div>
          <div class="noticeItem">
            <div class="left">
              <div class="top"><span>80</span>mm</div>
              <div class="bottom">磨损度实时值</div>
            </div>
            <div class="right">
              <img src="@/assets/business/shuju3.png" alt="" />
            </div>
          </div>
          <div class="noticeItem">
            <div class="left">
              <div class="top"><span>3455</span>mV</div>
              <div class="bottom">电池电压实时值</div>
            </div>
            <div class="right">
              <img src="@/assets/business/shuju4.png" alt="" />
            </div>
          </div>
        </div>

        <div class="chartBox">
          <div class="topChart">
            <div class="topChartItem">
              <LineChart :option="option1" />
            </div>
            <div class="topChartItem">
              <LineChart :option="option2" />
            </div>
            <div class="topChartItem">
              <LineChart :option="option3" />
            </div>
          </div>
          <div class="bottomChart">
            <div class="bottomChartSearch">
              <el-form
                :inline="true"
                :model="formData"
                class="demo-form-inline"
              >
                <el-form-item label="设备选择">
                  <el-select v-model="formData.region" placeholder="设备选择">
                    <el-option label="125438" value="125438"></el-option>
                    <el-option label="167838" value="167838"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="参数选择">
                  <el-select v-model="formData.region2" placeholder="参数选择">
                    <el-option label="温度" value="1"></el-option>
                    <el-option label="电流" value="2"></el-option>
                    <el-option label="距离" value="3"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="日期选择">
                  <el-date-picker
                    v-model="formData.date"
                    type="daterange"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                  >
                  </el-date-picker>
                </el-form-item>
              </el-form>
            </div>
            <div class="bottomChartContent">
              <LineChart :option="option4" />
            </div>
          </div>
        </div>
      </pane>
    </splitpanes>
  </div>
</template>

<script>
import moment from "moment";
import myData from "./data.js";
import { deptTreeSelect } from "@/api/system/user";
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import { Splitpanes, Pane } from "splitpanes";
import "splitpanes/dist/splitpanes.css";
import LineChart from "@/views/tool/components/echarts/LineChart.vue";
export default {
  name: "Monitoring",
  components: { LineChart, Treeselect, Splitpanes, Pane },
  data() {
    return {
      formData: {
        region: "125438",
        region2: "1",
        date: [moment().format("YYYY-MM-DD"), moment().format("YYYY-MM-DD")],
      },
      // 部门名称
      deptName: undefined,
      // 所有部门树选项
      deptOptions: undefined,
      option1: null,
      option2: null,
      option3: null,
      defaultProps: {
        children: "children",
        label: "label",
      },
    };
  },
  computed: {},
  watch: {
    // 根据名称筛选部门树
    deptName(val) {
      this.$refs.tree.filter(val);
    },
  },
  mounted() {
    // 默认选中第一个节点
    this.$nextTick(() => {
      if (this.deptOptions && this.deptOptions.length > 0) {
        this.$refs.tree.setCurrentKey(this.deptOptions[0].children[0].id);
      }
    });
    this.getDeptTree();

    this.draw1();
    this.draw2();
    this.draw3();
    this.draw4();
  },
  methods: {
    paneResize() {
      window.dispatchEvent(new Event("resize"));
    },
    /** 查询部门下拉树结构 */
    getDeptTree() {
      this.deptOptions = myData.deptOptions;
      // deptTreeSelect().then((response) => {
      //   this.deptOptions = response.data;
      // });
    },
    // 筛选节点
    filterNode(value, data) {
      if (!value) return true;
      return data.label.indexOf(value) !== -1;
    },
    // 节点单击事件
    handleNodeClick(data) {},

    draw1() {
      this.option1 = {
        title: {
          text: "温度平均值/每小时",
          left: "center",
          top: "40",
        },
        tooltip: {
          trigger: "axis",
        },
        grid: {
          left: "20",
          top: "100",
          right: "40",
          bottom: "20",
          containLabel: true,
        },
        xAxis: {
          type: "category",
          data: ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10"],
          axisTick: {
            show: false,
          },
          axisLine: {
            lineStyle: {
              color: "#e7e7e7",
            },
          },
          axisLabel: {
            show: true,
            color: "#4b4b4b",
          },
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            name: "数据",
            type: "line",
            smooth: true,
            itemStyle: {
              color: "#6287d2",
            },
            smooth: false,
            data: [72, 15, 98, 34, 53, 61, 82, 27, 44, 68],
          },
        ],
      };
    },
    draw2() {
      this.option2 = {
        title: {
          text: "电流平均值/每小时",
          left: "center",
          top: "40",
        },
        tooltip: {
          trigger: "axis",
        },
        grid: {
          left: "20",
          top: "100",
          right: "40",
          bottom: "20",
          containLabel: true,
        },
        xAxis: {
          type: "category",
          data: ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10"],
          axisTick: {
            show: false,
          },
          axisLine: {
            lineStyle: {
              color: "#e7e7e7",
            },
          },
          axisLabel: {
            show: true,
            color: "#4b4b4b",
          },
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            name: "数据",
            type: "line",
            smooth: true,
            itemStyle: {
              color: "#ef9148",
            },
            smooth: false,
            data: [62, 54, 33, 78, 92, 57, 41, 88, 73, 61],
          },
        ],
      };
    },
    draw3() {
      this.option3 = {
        title: {
          text: "距离平均值/每小时",
          left: "center",
          top: "40",
        },
        tooltip: {
          trigger: "axis",
        },
        grid: {
          left: "20",
          top: "100",
          right: "40",
          bottom: "20",
          containLabel: true,
        },
        xAxis: {
          type: "category",
          data: ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10"],
          axisTick: {
            show: false,
          },
          axisLine: {
            lineStyle: {
              color: "#e7e7e7",
            },
          },
          axisLabel: {
            show: true,
            color: "#4b4b4b",
          },
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            name: "数据",
            type: "line",
            smooth: true,
            itemStyle: {
              color: "#89c65e",
            },
            smooth: false,
            data: [34, 69, 51, 83, 77, 56, 91, 42, 63, 71],
          },
        ],
      };
    },
    draw4() {
      this.option4 = {
        tooltip: {
          trigger: "axis",
        },
        grid: {
          left: "20",
          top: "20",
          right: "40",
          bottom: "20",
          containLabel: true,
        },
        xAxis: {
          type: "category",
          data: ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10"],
          axisTick: {
            show: false,
          },
          axisLine: {
            lineStyle: {
              color: "#e7e7e7",
            },
          },
          axisLabel: {
            show: true,
            color: "#4b4b4b",
          },
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            name: "数据",
            type: "line",
            smooth: true,
            itemStyle: {
              color: "#6287d2",
            },
            smooth: false,
            data: [39, 83, 56, 22, 71, 47, 90, 64, 58, 31],
          },
          {
            name: "数据",
            type: "line",
            smooth: true,
            itemStyle: {
              color: "#ef9148",
            },
            smooth: false,
            data: [81, 29, 65, 53, 40, 72, 19, 88, 61, 37],
          },
          {
            name: "数据",
            type: "line",
            smooth: true,
            itemStyle: {
              color: "#89c65e",
            },
            smooth: false,
            data: [24, 77, 55, 92, 38, 67, 48, 61, 84, 29],
          },
        ],
      };
    },
  },
};
</script>

<style lang="scss" scoped>
.pageContent {
  height: 100%;
  padding: 10px;
  background: #f7f7f7;
  ::v-deep .default-theme {
    .splitpanes__pane {
      transition: none !important; /* 禁用过渡动画 */
      padding: 10px;
      border-radius: 10px;
      display: flex;
      flex-direction: column;
    }
    .splitpanes__splitter {
      background: #f7f7f7;
    }
  }

  .header {
    padding: 10px 20px;
    display: flex;
    align-items: flex-end;
    .left {
      letter-spacing: 2px;
      font-size: 30px;
      font-weight: bold;
      margin-right: 30px;
    }
    .right {
      font-size: 20px;
    }
  }
  .noticeNum {
    padding: 20px 0 20px 20px;
    display: flex;
    flex-wrap: wrap;
    .noticeItem {
      flex: 1;
      min-width: 390px;
      height: 160px;
      background: linear-gradient(
        134deg,
        #e9eff8 0%,
        #f6faff 52%,
        #ecf1f9 100%
      );
      border-radius: 8px 8px 8px 8px;
      margin-right: 20px;
      margin-bottom: 20px;
      display: flex;
      align-items: center;
      padding: 33px 36px;
      .left {
        height: 100%;
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        font-size: 16px;
        .top {
          span {
            font-size: 35px;
            font-weight: bold;
            margin-right: 10px;
          }
        }
      }
      .right {
        img {
          width: 60px;
          height: 60px;
        }
      }
    }
  }
  .chartBox {
    padding: 0 20px 20px 20px;
    flex: 1;
    display: flex;
    flex-direction: column;
    .topChart {
      flex: 1;
      height: 0;
      display: flex;
      margin-bottom: 20px;
      .topChartItem {
        flex: 1;
        width: 0;
        height: 100%;
        box-shadow: 0px 5px 12px 1px rgba(197, 197, 197, 0.3);
        border-radius: 8px 8px 8px 8px;
        &:not(:last-child) {
          margin-right: 20px;
        }
      }
    }
    .bottomChart {
      flex: 1;
      height: 0;
      box-shadow: 0px 5px 12px 1px rgba(197, 197, 197, 0.3);
      border-radius: 8px 8px 8px 8px;
      display: flex;
      flex-direction: column;
      .bottomChartSearch {
        padding: 20px 20px 0 20px;
      }
      .bottomChartContent {
        flex: 1;
        height: 0;
      }
    }
  }
}
</style>
